<template>
  <div class="custom_echarts" v-if="isActive">
    <div class="custom_echarts_main">
      <slot name="echartsTop"></slot>
      <div
        class="custom_echarts_main_item"
        v-for="(item, index) in item.data"
        :key="'echarts_index_' + index"
      >
        <div
          class="custom_echarts_main_item_echartsitem"
          :id="'echarts_' + index"
          :style="{
            width: item.width === 'auto' ? '100%' : item.width / 23.44 + 'rem',
            height: item.height / 23.44 + 'rem',
          }"
        ></div>
      </div>
      <slot name="echartsBottom"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "customEcharts",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      options: {},
      isActive: true,
    };
  },
  mounted() {
    let that = this;
    that.canvasEcharts();
    that.$query(window).on("resize", () => {
      that.reloadEcharts();
    });
  },
  methods: {
    reloadEcharts() {
      let that = this;
      that.isActive = false;
      that.$nextTick(() => {
        that.canvasEcharts();
        that.isActive = true;
      });
    },
    canvasEcharts() {
      let that = this;
      that.$store.dispatch("getStateEchartsData").then((v) => {
        that.options = v;
        that.$props.item.data.forEach((item, index) => {
          let dom = document.getElementById("echarts_" + index);
          that.$echarts.init(dom).setOption(that.options[index]);
        });
      });
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_echarts {
  margin: (10 / @base) 0 0;
  background-color: #fff;
  overflow: hidden;
  .custom_echarts_main {
    .custom_echarts_main_item {
      margin: (5 / @base) 0 0;
      overflow: hidden;
    }
  }
}
</style>
